<template>
  <div class="m-search-tree" :style="{ height: props.height }">
    <div class="m-search-tree__input">
      <el-input
        v-model="filterText"
        placeholder="请输入"
        suffix-icon="icon-search"
      />
    </div>

    <div class="m-search-tree__tree">
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="_data"
        highlight-current
        :filter-node-method="filterNode"
        v-bind="$attrs"
        :indent="0"
        icon="none"
      >
        <template #default="{ node, data }">
          <!-- 图标 -->
          <img
            style="width: 13x; height: 13px"
            v-if="!node.expanded && data.children && data.children.length"
            src="@/assets/imgs/u2180.png"
          />
          <img
            style="width: 13px; height: 13px"
            v-if="node.expanded"
            src="@/assets/imgs/u2177.png"
          />
          <img
            class="folder"
            style="width: 16px; height: 15px"
            src="@/assets/svg/folder.svg"
          />
          <!-- 超长 文字提示 -->
          <el-tooltip
            v-if="node.label && node.label.length > 10"
            class="box-item"
            effect="dark"
            :content="node.label"
            placement="right"
          >
            <span>{{ node.label.slice(0, 10) + '...' }}</span>
          </el-tooltip>
          <span v-else>{{ node.label }}</span>
        </template>
      </el-tree>
    </div>

    <div class="m-search-tree__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ElTree } from 'element-plus'
import { ref, watch, computed } from 'vue'
import { searchTreeProps } from './searchTree'
import { updateObjKeys } from '@/utils'

defineOptions({
  name: 'MSearchTree'
})

const props = defineProps(searchTreeProps)

const _data = computed(() => {
  return updateObjKeys(
    props.data,
    {
      label: props.fields.label ?? 'label',
      children: props.fields.children ?? 'children'
    },
    props.fields?.children ?? 'children'
  )
})

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Record<string, any>) => {
  if (!value) return true
  return data.label.includes(value)
}

defineExpose({
  treeRef
})
</script>

<style lang="scss" scoped>
.m-search-tree {
  display: flex;
  flex-direction: column;
  height: 600px;
  &__input {
    flex-shrink: 0;
  }
  &__tree {
    margin: 15px 0;
    flex: 1;
    overflow-y: auto;
  }
  &__footer {
    flex-shrink: 0;
    display: flex;
  }
}

// 覆盖自定义图标
:deep(.el-tree-node__expand-icon) {
  position: absolute;
}

// 虚线样式
:deep(.m-search-tree__tree) {
  .el-tree-node {
    position: relative;
    // padding-left: 32px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  // 竖线
  .el-tree-node:before {
    content: '';
    left: -13px;
    position: absolute;
    right: auto;
    border-width: 1px;
    border-left: 1px dashed #d8d8d8;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  // 横线
  // .el-tree-node:after {
  //   content: "";
  //   left: -4px;
  //   position: absolute;
  //   right: auto;
  //   border-width: 1px;
  //   border-top: 1px dashed #1389bc;
  //   height: 20px;
  //   top: 12px;
  //   width: 18px;
  // }
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-tree .el-icon-caret-right:before {
    content: '\e723';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    content: '\e722';
    font-size: 16px;
    color: #1389bc;
    position: absolute;
    left: -20px;
    top: -8px;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
  }
}
</style>
